<template>
    <div class="out_box">
        <div class="relative content_box">
            <div class="case_box property_box mb_20">
                <div class="all_box">
                    <div class="case">
                        <p class="text">团队订单总销售额 (USDT)</p>
                        <p class="money">{{ dataList.allMoney }}</p>
                        <p class="desc">{{ '≈ ￥' + $convertRMB(dataList.allMoney) }}</p>
                    </div>
                </div>
                <div class="info_box cl">
                    <div class="list">
                        <div class="case">
                            <p class="text">直接推荐</p>
                            <p class="money">{{ dataList.directMoney }}<span class="unit">USDT</span></p>
                            <p class="desc">{{ '≈ ￥' + $convertRMB(dataList.directMoney) }}</p>
                        </div>
                    </div>
                    <div class="list">
                        <div class="case">
                            <p class="text">间接推荐</p>
                            <p class="money">{{ dataList.indirectMoney }}<span class="unit">USDT</span></p>
                            <p class="desc">{{ '≈ ￥' + $convertRMB(dataList.indirectMoney) }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="case_box logs_box mb_20">
                <div class="title cl">
                    <h2 class="f_l">
                        直接推荐
                    </h2>
                    <span class="f_r tips">{{ dataTable.total + ' 笔订单' }}</span>
                </div>
                <div class="content gray_table text_c gray_thead pb_20">
                    <v-data-table :data='getTableData' :currentData='dataTable.records' :columns='columnsData' stripe :emptyText="not_data">
                        <template slot="td" slot-scope="props">
                            <div class="dis_ib text_l" v-if="props.column.field === 'createTime'">
                                <span class="text">{{ $getFormatMD(props.content, true).split(' ')[0] }}<br />{{ $getFormatMD(props.content, true).split(' ')[1] }}</span>
                            </div>
                            <div v-else-if="props.column.field === 'payMoney'">
                                <span class="text">{{ '$ ' + props.content }}</span>
                            </div>
                            <div v-else-if="props.column.field === 'state'">
                                <span class="text" v-show="props.content === '0'">待支付</span>
                                <span class="text" v-show="props.content === '1'">支付成功</span>
                                <span class="text" v-show="props.content === '2'">已到期</span>
                            </div>
                            <div v-else-if="props.column.field === 'cperiod'">
                                <span class="text">{{ props.content + ' 天' }}</span>
                            </div>
                            <div class="dis_ib text_l" v-else-if="props.column.field === 'createTime2'">
                                <span class="text">{{ $calcDate(props.item.createTime, 86400*3, [true]).split(' ')[0] }}<br />{{ $calcDate(props.item.createTime, 86400*3, [true]).split(' ')[1] }}</span>
                            </div>
                            <div v-else-if="props.column.field === 'operate'">
                                <a href="javascript:void(0)" class="text">查看订单</a>
                            </div>
                            <span v-else>{{ props.content }}</span>
                        </template>
                    </v-data-table>
                    <div class="pagination_box pr_20">
                        <v-pagination @change="changePage" :total="dataTable.total" :show-total="showTotal" show-quick-jumper></v-pagination>
                    </div>
                </div>
            </div>
            <div class="case_box logs_box mb_20">
                <div class="title cl">
                    <h2 class="f_l">
                        间接推荐
                    </h2>
                    <span class="f_r tips">{{ dataTable2.total + ' 笔订单' }}</span>
                </div>
                <div class="content gray_table text_c gray_thead pb_20">
                    <v-data-table :data='getTableData' :currentData='dataTable2.records' :columns='columnsData' stripe :emptyText="not_data">
                        <template slot="td" slot-scope="props">
                            <div class="dis_ib text_l" v-if="props.column.field === 'createTime'">
                                <span class="text">{{ $getFormatMD(props.content, true).split(' ')[0] }}<br />{{ $getFormatMD(props.content, true).split(' ')[1] }}</span>
                            </div>
                            <div v-else-if="props.column.field === 'payMoney'">
                                <span class="text">{{ '$ ' + props.content }}</span>
                            </div>
                            <div v-else-if="props.column.field === 'state'">
                                <span class="text" v-show="props.content === '0'">待支付</span>
                                <span class="text" v-show="props.content === '1'">支付成功</span>
                                <span class="text" v-show="props.content === '2'">已到期</span>
                            </div>
                            <div v-else-if="props.column.field === 'cperiod'">
                                <span class="text">{{ props.content + ' 天' }}</span>
                            </div>
                            <div class="dis_ib text_l" v-else-if="props.column.field === 'createTime2'">
                                <span class="text">{{ $calcDate(props.item.createTime, 86400*3, [true]).split(' ')[0] }}<br />{{ $calcDate(props.item.createTime, 86400*3, [true]).split(' ')[1] }}</span>
                            </div>
                            <div v-else-if="props.column.field === 'operate'">
                                <a href="javascript:void(0)" class="text">查看订单</a>
                            </div>
                            <span v-else>{{ props.content }}</span>
                        </template>
                    </v-data-table>
                    <div class="pagination_box pr_20">
                        <v-pagination @change="changePage2" :total="dataTable2.total" :show-total="showTotal2" show-quick-jumper></v-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { getOrderManagerRecommend, getOrderManagerTotalSales } from '@doapis/personal/orders.js';

    export default {
        name: "HashRateOrder",
        data: function() {
            return {
                dataList: {},
                dataTable: {
                    current: 1,
                    records: [],
                    total: 0
                },
                dataTable2: {
                    current: 1,
                    records: [],
                    total: 0
                },
                columnsData:[
                    { title:"序号", field:'id', width: '11.11%' },
                    { title:"下单时间", field:'createTime', width: '11.11%' },
                    { title:"挖矿币种", field:'currency', width: '11.11%' },
                    { title:"订单号", field:'orderId', width: '11.11%' },
                    { title:"订单总金额", field:'payMoney', width: '11.11%' },
                    { title:"支付状态", field:'state', width: '11.11%' },
                    { title:"挖矿周期", field:'cperiod', width: '11.11%' },
                    { title:"挖矿时间", field:'createTime2', width: '11.11%' },
                    { title:"操作", field:'operate', width: '11.11%' }
                ],
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                return userDATA;
            }
        },
        methods: {
            getData: function() {
                const that = this;
                getOrderManagerTotalSales({
                    memberid: that.userDATA.memberid
                }).then(function(res) {
                    that.dataList = res.data;
                });
            },
            getTableData: function(params) {
                const that = this;
                if (params) {
                    return $.$getPromiseNullData();
                } else {
                    getOrderManagerRecommend({
                        current: that.dataTable.current,
                        boolDirect: true,
                        memberid: that.userDATA.memberid
                    }).then(function(res) {
                        that.dataTable = res.data;
                    });

                    getOrderManagerRecommend({
                        current: that.dataTable.current,
                        boolDirect: false,
                        memberid: that.userDATA.memberid
                    }).then(function(res) {
                        that.dataTable2 = res.data;
                    });
                }
            },
            showTotal: function(val) {
                return '全部' + this.dataTable.total + '条';
            },
            changePage: function(val) {
                this.dataTable.current = val;
                this.getTableData();
            },
            showTotal2: function(val) {
                return '全部' + this.dataTable2.total + '条';
            },
            changePage2: function(val) {
                this.dataTable2.current = val;
                this.getTableData();
            },
            $getFormatMD: $.$getFormatMD,
            $convertRMB: $.$convertRMB,
            $calcDate: $.$calcDate
        },
        mounted: function() {
            this.getData();
            this.getTableData();
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .out_box{
        background-color: #eaeaea;
    }
    .content_box{
        .case_box{
            background-color: white;
            >.title{
                padding: 16px 20px;
                font-size: 13px;
            }
            >.content{
                padding: 20px;
                font-size: 13px;
                .font_gray;
            }
        }
        .property_box{
            .flex_row_wrap;
            padding: 0;
            border:1px solid #DDD;
            font-size: 13px;
            .money{
                color: @color_orange;
            }
            .all_box{
                width: 30%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                .case{
                    padding: 30px 0;
                    font-size: 14px;
                    border-right: 1px solid #EDEDED;
                }
                .money{
                    margin: 8px 0;
                    font-size: 30px;
                }
                .text{
                    font-weight: 700;
                }
                .desc{
                    line-height: 14px;
                    .font_gray;
                }
            }
            .info_box{
                width: 70%;
                .flex_row_wrap;
                text-align: center;
                .list{
                    width: 50%;
                    float: left;
                    padding: 20px;
                    font-size: 16px;
                    box-sizing: border-box;
                    .case{
                        display: inline-block;
                        padding: 30px 0;
                        font-size: 14px;
                        text-align: left;
                    }
                    .text{
                        font-weight: 700;
                        padding-bottom: 8px;
                    }
                    .money{
                        margin: 8px 0;
                        font-size: 16px;
                        font-weight: 700;
                    }
                    .desc{
                        line-height: 14px;
                        .font_gray;
                    }
                    .unit{
                        margin-left: 4px;
                        font-weight: 700;
                        color: black;
                    }
                    .btn{
                        display: inline-block;
                        margin-top: 10px;
                        padding: 4px 10px;
                        font-size: 10px;
                        font-weight: normal;
                        color: white;
                        border-radius: 34px;
                        .orange_linear_ellipsis_btn;
                    }
                }
            }
        }
        .logs_box{
            >.title{
                .font_theme;
                .tips{
                    margin-top: 8px;
                    font-size: 10px;
                    color: #CCC;
                }
            }
            >.content{
            }
        }
    }
</style>
